<template>
    <div class="tab-group store-group">
        <div class="item" v-for="item in list" :key="item.id">
            <div class="con-left van-hairline--right" >
                <div class="title">{{item.shop_name}}</div>
                <div class="address" @click="optionmap(item)"><van-icon name="location"/>{{item.shop_address}}</div>
            </div>
            <div class="con-right" @click="iphone(item.shop_iphone)">
                <van-icon name="phone"   />
            </div>
        </div>
    </div>
</template>

<script>
import { balancehaolist } from '@/api/city-card/pay-the-fees/index'
export default {
  name: 'StoreList',
  data () {
    return {
      list: [],
      type: this.$route.query.subsidy_type,
      store_id: this.$route.query.store_id

    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      let param = { store_id: this.store_id }
      balancehaolist(param).then(ret => {
        this.list = ret.data.data
      })
    },
    iphone (tel) {
      window.location.href = 'tel:' + tel
    },
    optionmap (data) {
      console.log('ssss', data)
      this.$common.openLocation({
        latitude: parseFloat(data.store_latitude), // 纬度，浮点数，范围为90 ~ -90
        longitude: parseFloat(data.store_longitude), // 经度，浮点数，范围为180 ~ -180
        name: data.shop_name, // 位置名
        address: data.shop_address// 地址详情说明
      })
    }
  }
}
</script>

<style scoped>
    .tab-group {
        padding: 10px;
        background-color: #f5f5f5;
    }
    .store-group>.item {
        display: flex;
        align-items: center;
        background-color: white;
        margin-bottom: 10px;
        padding: 10px 0 10px 10px;
    }
    .store-group>.item>.con-left {
        width: 80%;
    }
    .store-group>.item>.con-left>.title {
        font-size: 12px;
        font-weight: bold;
        margin: 3px;
    }
    .store-group>.item>.con-left>.address {
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;
    }
    .store-group>.item>.con-right {
        width: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #6AABDE;
    }
</style>
